<template>
  <div>
    <el-dropdown @command="handleCommand">
      <el-button type="primary">
        <i class="el-icon-circle-plus"></i>
        添加导航
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <!-- <el-dropdown-item  v-for="(item,index) in allTabBar.list" :key="index" :command="index">{{item.name}}</el-dropdown-item> -->
        <el-dropdown-item
          :disabled="isSelect(item.key)"
          v-for="(item, index) in allTabBar.list"
          :key="index"
          :command="index"
          >{{ item.name }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    <div style="margin-top: 8px">最多添加5个底部导航,可删除后重新添加</div>
    <vuedraggable
      class="drag-box"
      v-model="o.list"
      ref="drag"
      @update="datadragEnd"
    >
      <transition-group>
        <div v-for="(element, index) in o.list" :key="element.key">
          <!-- v-if="element.is_show===1" -->
          <div class="data-item">
            <div class="data-item_title" @click="onToggleChange(element.key)">
              <div class="flex-1">
                {{ element.name }}{{ element.key == active ? '(修改中)' : '' }}
              </div>
              <i
                class="el-icon-error"
                style="font-size: 18px; color: #bbbbbb"
                @click.stop="del(index, element.key)"
              ></i>
              <!-- <i class="el-icon-error" style="font-size:18px;color:#bbbbbb" @click.stop="del(index,element.key)" v-if="element.key!=1"></i> -->
            </div>
            <div v-if="element.key == active">
              <div class="data-item_line"></div>
              <div class="form-item">
                <div class="form-label">名称</div>
                <div style="flex: 1">
                  <el-input
                    @input="changeInput(element.name, element.key)"
                    size="mini"
                    v-model="element.name"
                    class="flex-1"
                    placeholder="最多输入5个字"
                    type="text"
                    :maxlength="5"
                    show-word-limit
                  ></el-input>
                </div>
              </div>
              <div class="form-item" v-if="element.key === 20001">
                <div class="form-label">位置</div>
                <div style="flex: 1">
                  <el-radio
                    v-model="element.is_show"
                    :label="citem.label"
                    v-for="(citem, cindex) in position"
                    :key="cindex"
                    @change="radioChange"
                    >{{ citem.title }}</el-radio
                  >
                </div>
              </div>
              <div @click="toChangeIcon(index, element.key)" class="form-item">
                <div class="form-label">图标</div>
                <div class="form-icon_box">
                  <div class="form-icon_top">
                    <i
                      class="iconfont"
                      :class="element.iconPath"
                      :style="{ fontSize: 30 + 'px', color: o.color }"
                    ></i>
                  </div>
                  <div class="form-icon_text">未选中</div>
                </div>
                <div class="form-icon_box">
                  <div class="form-icon_top">
                    <i
                      class="iconfont"
                      :class="element.selectedIconPath"
                      :style="{ fontSize: 30 + 'px', color: o.selectedColor }"
                    ></i>
                  </div>
                  <div class="form-icon_text">已选中</div>
                </div>
                <div class="form-change_text">修改</div>
              </div>
              <div class="form-item">
                <div class="form-label">链接</div>
                <block v-if="element.key > 10000 && element.key < 20000">
                  <el-input
                    type="text"
                    size="mini"
                    v-model="element.url_out"
                    class="flex-1"
                    :placeholder="diyTitleObj[element.key]"
                  ></el-input>
                </block>
                <block v-else>
                  <el-tag>{{ diyTitleObj[element.key] }}</el-tag>
                </block>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
    </vuedraggable>

    <el-dialog
      title="图标选择"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="810px"
    >
      <div class="diy-icon-list flex-warp">
        <div
          @click="toCheckIcon(index)"
          class="diy-item-child"
          :class="[{ check: index == iconInd }]"
          v-for="(item, index) in iconList"
          :key="index"
        >
          <div class="diy-item-icon">
            <div class="diy-item-icon-child">
              <i
                class="iconfont"
                style="font-size: 18px"
                :class="item.iconPath"
                :style="{ color: o.color }"
              ></i>
            </div>
            <div class="diy-item-icon-child ml">
              <i
                class="iconfont"
                style="font-size: 18px"
                :class="item.selectedIconPath"
                :style="{ color: o.selectedColor }"
              ></i>
            </div>
          </div>
          <div class="diy-item-text">{{ item.name }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toConfirmIcon">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
export default {
  components: {
    vuedraggable
  },
  data () {
    return {
      active: '',
      diyTitleObj: {
        1: '名片',
        2: '商城',
        3: '动态',
        4: `${this.$t('menu.Website')}`,
        5: '房产',
        6: '活动',
        7: '预约',
        8: '直播',
        9: '短视频',
        10: '付费课程',
        11: '问卷调查',
        12: '商城分类',
        13: '商城购物车',
        14: '约课',
        20: '装修首页',
        21: '工地',
        22: '案例',
        40: '餐饮首页',
        41: '点餐',
        50: '汽车首页',
        51: '爱车推荐',
        60: '场地预约',
        61: '商家入驻',
        10001: '请填写电话',
        10002: '请填写网页链接',
        10003: '请填写小程序APPID',
        10004: '请填写VR链接',
        10005: '请填写内部链接',
        20001: '个人中心'
      },
      position: [{ label: 0, title: '顶部' }, { label: 1, title: '底部' }],
      tabInd: -1,
      dialogVisible: false,
      iconInd: -1,
      iconList: [{
        name: '首页 - 1',
        iconPath: 'iconhome',
        selectedIconPath: 'iconhome1'
      }, {
        name: '首页 - 2',
        iconPath: 'iconshouye2',
        selectedIconPath: 'iconshouyexuanzhong'
      }, {
        name: '首页 - 3',
        iconPath: 'iconshouye_2',
        selectedIconPath: 'iconshouye_1'
      }, {
        name: '首页 - 4',
        iconPath: 'iconshouye-2',
        selectedIconPath: 'iconshouye-1'
      }, {
        name: '我的 - 1',
        iconPath: 'iconyonghuduangerenzhongxin',
        selectedIconPath: 'iconyonghuduangerenzhongxin1'
      }, {
        name: '我的 - 2',
        iconPath: 'iconwode-2',
        selectedIconPath: 'iconwode-1'
      }, {
        name: '名片 - 1',
        iconPath: 'icon-mingpian',
        selectedIconPath: 'icon-mingpian1'
      }, {
        name: '商城 - 1',
        iconPath: 'icon-shangcheng1',
        selectedIconPath: 'icon-shangcheng'
      }, {
        name: '商城 - 2',
        iconPath: 'iconshangcheng-2',
        selectedIconPath: 'iconshangcheng-1'
      }, {
        name: '分类 - 1',
        iconPath: 'icon_cate_1',
        selectedIconPath: 'icon_cate_1_on'
      }, {
        name: '购物车 - 1',
        iconPath: 'icon_cart_1',
        selectedIconPath: 'icon_cart_1_on'
      }, {
        name: '动态 - 1',
        iconPath: 'icon-dongtai1',
        selectedIconPath: 'icon-dongtai'
      }, {
        name: '官网 - 1',
        iconPath: 'icon-guanwang',
        selectedIconPath: 'icon-guanwang1'
      }, {
        name: '房产 - 1',
        iconPath: 'icon-fangchan1',
        selectedIconPath: 'icon-fangchan'
      }, {
        name: '活动 - 1',
        iconPath: 'icon-huodong1',
        selectedIconPath: 'icon-huodong'
      }, {
        name: '预约 - 1',
        iconPath: 'icon-yuyue',
        selectedIconPath: 'icon-yuyue1'
      }, {
        name: '直播 - 1',
        iconPath: 'iconlive1',
        selectedIconPath: 'iconlive'
      }, {
        name: '短视频 - 1',
        iconPath: 'iconShortVideo1',
        selectedIconPath: 'iconShortVideo'
      }, {
        name: '付费课程 - 1',
        iconPath: 'iconcourse1',
        selectedIconPath: 'iconcourse'
      }, {
        name: '约课 - 1',
        iconPath: 'iconkecheng1',
        selectedIconPath: 'iconkecheng'
      }, {
        name: '问卷调查 - 1',
        iconPath: 'iconpingjia',
        selectedIconPath: 'iconpingjia1'
      }, {
        name: '工地 - 1',
        iconPath: 'icongongdiweixuanzhong',
        selectedIconPath: 'icongongdixuanzhong'
      }, {
        name: '案例 - 1',
        iconPath: 'iconanliliebiao1',
        selectedIconPath: 'iconanliliebiao2'
      }, {
        name: '点餐 - 1',
        iconPath: 'iconcanyin1',
        selectedIconPath: 'iconcanyin'
      }, {
        name: '爱车推荐 - 1',
        iconPath: 'iconaiche-2',
        selectedIconPath: 'iconaiche-1'
      }, {
        name: '场地预约 - 1',
        iconPath: 'iconchangdiyuyue-1_1',
        selectedIconPath: 'iconchangdiyuyue-1'
      }, {
        name: '婚庆 - 1',
        iconPath: 'iconhunqing-2',
        selectedIconPath: 'iconhunqing-1'
      }, {
        name: '电话 - 1',
        iconPath: 'icon_diy_10001_1',
        selectedIconPath: 'icon_diy_10001_1_on'
      }, {
        name: '网页 - 1',
        iconPath: 'icon_diy_10002_1',
        selectedIconPath: 'icon_diy_10002_1_on'
      }, {
        name: '网页 - 2',
        iconPath: 'icon_diy_10002_2',
        selectedIconPath: 'icon_diy_10002_2_on'
      }, {
        name: '小程序 - 1',
        iconPath: 'icon_diy_10003_1',
        selectedIconPath: 'icon_diy_10003_1_on'
      }, {
        name: 'VR - 1',
        iconPath: 'icon_diy_10004_1',
        selectedIconPath: 'icon_diy_10004_1_on'
      }, {
        name: '链接 - 1',
        iconPath: 'icon_diy_10005_1',
        selectedIconPath: 'icon_diy_10005_1_on'
      }]
    }
  },
  name: 'tabbar-setting',
  props: {
    o: Object,
    allTabBar: Object,
    page: Object,
    nowPageKey: Number
  },
  methods: {
    datadragEnd (evt) {
      let tabbar = this.o.list
      let key = this.nowPageKey
      this.$emit('moveTab', { key, tabbar })
    },
    radioChange (val) {
      if (val === 1) {
        let list = JSON.parse(JSON.stringify((this.o.list)))
        if (list.length > 5) {
          this.$message.error(`最多添加5个底部导航`)
          list.map((item, index) => {
            if (item.key === 20001) {
              item.is_show = 0
            }
          })
          this.o.list = list
        } else {
          this.$emit('radioChange', this.o)
        }
      } else {
        this.$emit('radioChange', this.o)
      }
    },
    changeInput (val, active) {
      this.$emit('input', {
        val,
        active
      })
    },
    isSelect (key) {
      // tabbar.list.map(item => {
      //   item.resNumber = 0
      //   page.list.map(aitem => {
      //     if (item.key === aitem.key) {
      //       item.resNumber++
      //     }
      //   })
      // })
      let isSelect = this.o.list.some(e => {
        return e.key === key
      })
      return isSelect
    },
    // 删除导航菜单
    del (index, key) {
      if (this.o.list.length <= 1) {
        this.$message.error(`至少要有1个底部导航`)
        return
      }
      this.$emit('del', { index, key })
    },
    onToggleChange (key) {
      if (this.active === key) {
        this.active = ''
      } else {
        this.active = key
      }
    },
    // 修改图标
    toChangeIcon (index, key) {
      // if (key < 10000) return;
      this.tabInd = index
      this.dialogVisible = true
      this.iconInd = -1
    },
    // 选择图标
    toCheckIcon (index) {
      this.iconInd = index
    },
    // 确认并关闭图标库
    toConfirmIcon () {
      let {
        tabInd,
        iconInd
      } = this
      if (iconInd === -1) {
        this.$message.error(`请选择图标`)
        return
      }
      let {
        iconPath,
        selectedIconPath
      } = this.iconList[iconInd]
      this.o.list[tabInd].iconPath = iconPath
      this.o.list[tabInd].selectedIconPath = selectedIconPath
      this.tabInd = -1
      this.iconInd = -1
      this.dialogVisible = false
    },
    // 添加导航
    handleCommand (index) {
      let number = 5
      this.o.list.map((item, index) => {
        if (item.key === 20001 && item.is_show !== 1) {
          number = 6
        }
      })
      if (this.o.list.length >= number) {
        this.$message.error(`最多添加5个底部导航`)
        return
      }
      let item = this.allTabBar.list[index]
      this.o.list.push(item)
      this.page[item.key] = {
        list: []
      }
      this.radioChange()
      // let obj = Object.assign({}, this.o.list[index], {is_show: 1})
      // this.o.list.splice(index, 1)
      // this.o.list.push(obj)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-dropdown-menu {
  height: 65vh;
  overflow: auto;
}
.data-item {
  width: 100%;
  border: 1px solid #eeeeee;
  background: #f4f6f9;
  margin-top: 10px;
  position: relative;
}

.data-item:last-child {
  margin-bottom: 10px;
}

.data-item_title {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.data-item_line {
  height: 1px;
  background: #eee;
}

.del-box {
  position: absolute;
  right: -4px;
  top: -4px;
  z-index: 20;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 10px;
}

.form-label {
  width: 80px;
  padding-left: 26px;
}

.form-explain {
  font-size: 12px;
  color: #888;
  margin-left: 10px;
}

.flex-1 {
  flex: 1;
}

.bold {
  font-weight: bold;
}

.add-btn {
  width: 320px;
  height: 70px;
  display: flex;
  align-items: center;
  border: 1px solid #eeeeee;
  background: #fff;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.add-btn_title {
  color: #429dff;
  font-size: 14px;
}

.add-btn_caption {
  color: #999;
  font-size: 12px;
  margin-top: 4px;
}

.add-tip {
  font-size: 14px;
  color: #333;
  margin: 18px 0;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-icon_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-right: 10px;
}

.form-icon_top {
  border: 1px solid #eee;
  width: 70px;
  height: 70px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-change_text {
  margin-top: -80px;
  color: #409eff;
}

.form-icon_text {
  color: #999999;
  font-size: 14px;
  margin-top: 6px;
}

.diy-icon-list {
  height: 400px;
  overflow: auto;
}

.diy-item-child {
  width: 100px;
  height: 100px;
  padding: 15px;
  border-radius: 4px;
  margin: 0px 5px;
  cursor: pointer;
}

.diy-item-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.diy-item-icon-child {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: rgba(238, 238, 238, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.diy-item-text {
  height: 14px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 200;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  margin: 5px 0;
}

.diy-item-child.check {
  background: rgba(243, 243, 243, 1);
}

.diy-item-child.check .diy-item-icon-child {
  background: rgba(255, 255, 255, 1);
}
</style>
